<template>
	<v-form :model="form" :rules="rules" layout="horizontal" @submit="handleSubmit">
		<v-form-item label="用户名" name="username">
			<input v-model="form.username" placeholder="请输入用户名" class="uni-input" />
		</v-form-item>

		<v-form-item label="密码" name="password">
			<input v-model="form.password" type="password" placeholder="请输入密码" class="uni-input" />
		</v-form-item>
	</v-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';

const form = reactive({
	username: '',
	password: ''
});

const rules = {
	username: [
		{
			required: true,
			message: '用户名不能为空'
		}
	],
	password: [
		{
			required: true,
			pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
			message: '至少8位包含字母和数字'
		}
	]
};

const handleSubmit = (formData: typeof form) => {
	uni.showToast({
		title: '提交成功',
		icon: 'success'
	});
	console.log('表单数据:', formData);
};
</script>
